<template>
    <div class="schcema-parser table-content">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="content">
                    <div class="schcema">
                        <div class="title">模式列表</div>
                        <div class="list">
                            <div class="list-head item">
                                <span class="index">序号</span>
                                <span class="refractiveIndex">有效折射率</span>
                            </div>
                            <div class="item" v-for="(item, i) in 100">
                                <span class="index">{{i >= 9 ? '' : '0'}}{{i + 1}}</span>
                                <span class="wavelength">{{item}}</span>
                            </div>
                        </div>
                        <div class="calc-parameter form">
                            <div class="form-item">
                                <div class="label">界面:</div>
                                <pui-selector :dataList="componentRef.sectionOptions"></pui-selector>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.section"/>
                            </div>
                            <div class="form-item">
                                <div class="label">波长（μm）:</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.wavelength"/>
                            </div>
                            <div class="form-item">
                                <div class="label">模式数量:</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.schcemaNum"/>
                            </div>
                            <div class="form-item">
                                <div class="label">折射率:</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.refractiveIndex"/>
                            </div>
                            <div class="btn">
                                <pui-button type="primary">计算</pui-button>
                            </div>
                        </div>
                    </div>
                    <div class="analyzer">
                        <div class="title">边界条件</div>
                        <div class="form">
                            <div class="form-item">
                                <div class="label">x最小边界:</div>
                                <pui-selector :dataList="componentRef.pmlOptions"></pui-selector>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.xMinPml"/>
                            </div>
                            <div class="form-item">
                                <div class="label">x最大边界:</div>
                                <pui-selector :dataList="componentRef.pmlOptions"></pui-selector>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.xMaxPml"/>
                            </div>
                            <div class="form-item">
                                <div class="label">y最小边界:</div>
                                <pui-selector :dataList="componentRef.pmlOptions"></pui-selector>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.yMinPml"/>
                            </div>
                            <div class="form-item">
                                <div class="label">y最大边界:</div>
                                <pui-selector :dataList="componentRef.pmlOptions"></pui-selector>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.yMaxPml"/>
                            </div>
                            <div class="form-item">
                                <div class="label">z最小边界:</div>
                                <pui-selector :dataList="componentRef.pmlOptions"></pui-selector>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.zMinPml"/>
                            </div>
                            <div class="form-item">
                                <div class="label">z最大边界:</div>
                                <pui-selector :dataList="componentRef.pmlOptions"></pui-selector>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.formData.zMaxPml"/>
                            </div>
                        </div>
                        <div class="analyze">
                            <div class="pic">
                                <img src="" />
                            </div>
                            <div class="form">
                                <div class="form-item">
                                    <div class="label">分量</div>
                                    <pui-selector :dataList="componentRef.componentOptions"></pui-selector>
                                </div>
                                <div class="form-item">
                                    <div class="label"></div>
                                    <pui-selector :dataList="componentRef.componentOptions2"></pui-selector>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="submitHandle" type="primary">读取结果</pui-button>
                <pui-button @click="submitHandle">保存结果</pui-button>
                <pui-button @click="closeDialog">关闭</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'MaterialCustom'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '模式解析'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const emit = defineEmits({
    onClose: (val: any) => {}
})
const componentRef = reactive({
    dialogVisible: false,
    optical: {
        signalPower: [15e8, 2.5e-17, 9.4e-41],
        loss: 2.5e3,
        peakWaveLength: 1550,
        referWaveLength: 1550,
        refractiveIndex: 3.2,
        aseWaveLengthRange: 0.2,
        effectiveRefractiveIndex: 3.19296541253737,
        groupRefractiveIndex: 3.44949559033477,
        powerLimitingFactor: 0.3,
    },
    pmlOptions: [
        { label: 'pml', value: 'pml' },
        { label: 'zero', value: 'zero' },
        { label: 'value', value: 'value' },
    ],
    sectionOptions: [
        { label: 'X', value: 'x' },
        { label: 'Y', value: 'y' },
        { label: 'Z', value: 'z' },
    ],
    componentOptions: [
        { label: 'Ex', value: 'Ex' },
    ],
    componentOptions2: [
        { label: 'amplitude', value: 'amplitude' },
    ],
    formData: {
        xMinPml: 0,
        xMaxPml: 0,
        yMinPml: 0,
        yMaxPml: 0,
        zMinPml: 0,
        zMaxPml: 0,
        section: 0,
        wavelength: 1.55,
        schcemaNum: 10,
        refractiveIndex: 3,
    }
}) as any
const init = () => {
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
const submitHandle = () => {

}

defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>